<template>
  <div>
    <el-header class="bd-row">
      <el-button type="text" @click="add()">新建</el-button>
    </el-header>

    <el-main class="bd-row">
      <el-table :data="tableData">

        <el-table-column prop="name" label="姓名">
        </el-table-column>

        <el-table-column prop="dateOfBirth" label="出生日期">
        </el-table-column>

        <el-table-column prop="gender" label="性别">
        </el-table-column>

        <el-table-column prop="introductionToThe" label="简介">
        </el-table-column>

        <el-table-column
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="remove(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :visible.sync="dialogFormVisible">
        <el-form :label-position=labelPosition label-width="80px">
          <el-form-item label="姓名">

            <el-input style="width:100%" placeholder="" :disabled="false"
                      v-model="model.name"></el-input>

          </el-form-item>
          <el-row type="flex">
            <el-col>
              <el-form-item label="出生日期">

                <el-date-picker v-model="model.dateOfBirth" :readonly="false"
                                :disabled="false"
                                :editable="true"
                                :clearable="true"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                format="yyyy-MM-dd">
                </el-date-picker>

              </el-form-item>

            </el-col>
            <el-col>
              <el-form-item label="性别">

                <el-radio-group v-model="model.gender" :disabled="false">
                  <el-radio :label="item.value" v-for="(item, index) in genderOptions">{{item.value}}
                  </el-radio>
                </el-radio-group>

              </el-form-item>

            </el-col>

          </el-row>
          <el-form-item label="简介">

            <el-input type="textarea" v-model="model.introductionToThe" placeholder="" :rows="5"></el-input>

          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </span>
      </el-dialog>
    </el-main>
  </div>
</template>

<script>
  import api_userInformation from '../api/api_userInformation'

  export default {
    name: "Demo",
    data() {
      return {
        tableData: [],
        dialogFormVisible: false,
        labelPosition: 'right',
        model: {
          name: '',
          dateOfBirth: '',
          gender: '',
          introductionToThe: '',

        },

        genderOptions: [{"value": "女", "label": "选项1"}, {"value": "男", "label": "选项2"}, {
          "value": "其他",
          "label": "选项3"
        }],

      }
    },
    methods: {
      list() {
        api_userInformation.list({}).then(
          res => {
            this.tableData = res
          }
        )
      },
      save() {
        if (this.model.id) {
          api_userInformation.update(this.model).then(
            res => {
              this.dialogFormVisible = false
              this.list()
            }
          )
        } else {
          api_userInformation.save(this.model).then(
            res => {
              this.dialogFormVisible = false
              this.list()
            }
          )
        }
      },
      add() {
        this.model = {}
        this.dialogFormVisible = true
      },
      edit(model) {
        this.model = model
        this.dialogFormVisible = true
      },
      remove(id) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api_userInformation.remove({id: id}).then(
            res => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.list()
            }
          )

        })

      },
    },
    mounted() {
      this.list()
    }
  }
</script>

<style scoped>

</style>

